<!DOCTYPE html>
<!-- vim: set expandtab ts=2 sw=2 tw=80: -->
<html>
  <head>
    <title>Web Animations and CSS Integration Note</title>
    <meta http-equiv='Content-Type' content='text/html;charset=utf-8'/>
    <script src='http://dev.w3.org/2009/dap/ReSpec.js/js/respec.js'
      class='remove'></script>
    <script class='remove'>
      var respecConfig = {
        // specification status (e.g. WD, LCWD, NOTE, etc.). If in doubt use
        // ED.
        specStatus: "unofficial",

        // the specification's short name, as in
        // http://www.w3.org/TR/short-name/
        // shortName:            "web-anim-css",

        // if your specification has a subtitle that goes below the main
        // formal title, define it here
        // subtitle   :  "an excellent document",

        // if you wish the publication date to be other than today, set this
        // publishDate:  "2009-08-06",

        // if the specification's copyright date is a range of years, specify
        // the start date here:
        // copyrightStart: "2005"

        // if there is a previously published draft, uncomment this and set
        // its YYYY-MM-DD date and its maturity status
        // previousPublishDate: "1977-03-15",
        // previousMaturity: "WD",

        // if there a publicly available Editor's Draft, this is the link
        // edDraftURI:
        // "http://dev.w3.org/2009/dap/ReSpec.js/documentation.html",

        // if this is a LCWD, uncomment and set the end of its review period
        // lcEnd: "2009-08-05",

        // if you want to have extra CSS, append them to this list
        // it is recommended that the respec.css stylesheet be kept
        extraCSS: ["http://dev.w3.org/2009/dap/ReSpec.js/css/respec.css",
                   "web-animations.css"],

        // Turning off inlineCSS for now since if extraCSS points to
        // a relative URL your testing from a file URL the XHR will fail.
        // Probably should turn this back on once this is hosted on a server
        // somewhere.
        inlineCSS: false,

        // editors, add as many as you like
        // only "name" is required
        editors:  [
            { name: "Shane Stephens", mailto: "shanestephens@google.com",
              company: "Google", companyURL: "http://www.google.com/" },
            { name: "Tab Atkins", mailto: "jackalmage@gmail.com",
              company: "Google", companyURL: "http://www.google.com/" },
            { name: "Brian Birtles", mailto: "bbirtles@mozilla.com",
              company: "Mozilla Japan", companyURL: "http://mozilla.jp/" }
        ],

        // authors, add as many as you like.
        // This is optional, uncomment if you have authors as well as editors.
        // only "name" is required. Same format as editors.

        //authors:  [
        //    { name: "Your Name", url: "http://example.org/",
        //      company: "Your Company", companyURL: "http://example.com/" },
        //],

        // XXX If we continue using ReSpec then we need to tweak it to support
        // multiple working groups. It includes updating the patent section
        // prose to say "groups" instead of "group" etc.
        // name of the WG
        // wg: "CSS Working Group (part of the Style Activity) and the SVG " +
        //     "Working Group (part of the Graphics Activity)",

        // URI of the public WG page
        // wgURI: "http://www.w3.org/Graphics/fx/",

        // name (without the @w3c.org) of the public mailing to which comments
        // are due
        wgPublicList: "public-fx",

        // URI of the patent status for this WG, for Rec-track documents
        // !!!! IMPORTANT !!!!
        // This is important for Rec-track documents, do not copy a patent URI
        // from a random document unless you know what you're doing. If in
        // doubt ask your friendly neighbourhood Team Contact.
        wgPatentURI:  "",

        noIDLSorting: true,
        noIDLIn: true
      };
    </script>
  </head>
  <body>
    <section id='abstract'>
      This is the abstract for your specification.
    </section>
    <section class="informative">
      <h2>Introduction</h2>
      <section>
        <h3>Relationship to other Specifications</h3>
        <p>
          This specification extends the CSS Transitions [[CSS3-TRANSITIONS]]
          and CSS Animations [[CSS3-ANIMATIONS]] specifications. It also
          clarifies the handling of replaced content [[CSS21]] and
          <code>image</code> content [[CSS3-IMAGES]].
        </p>
      </section>
    </section>

    <section>
      <h2>Replaced content and <code>image</code> values</h2>
      <p class="todo">
        How do you synchronize animations in background images, content
        attributes etc.? Does it appear in the animation tree? Is this
        a security problem if it does? Do you create a hidden mediaController
        and associate everything with that so that at least elements with the
        same background all have the same frame?
      </p>
    </section>

    <section>
      <h2>The <code>timeline-start</code> property</h2>
      <div class="todo">
        Values: onload | onstart | manual<br>
        Initial: onload<br>
        Applies to: Anywhere the <code>timelineStart</code> attribute is allowed.
      </div>
    </section>

    <section>
      <h2>CSS Transitions</h2>
      <p>
        Section 3 of [[!CSS3-TRANSITIONS]] defines the conditions under which a CSS Transition should occur. When these conditions are met, an implementation will behave as if the following objects were constructed via the Web Animation JS API:
        <ul>
          <li>
            For each <var>property</var> referenced by <var>transition-property</var> that has a different
            computed style before and after the transition occurs:
            <ul>
              <li>
                The <var>from frame</var>, a <code>WebAnimationFrame</code> with an <var>offset</var> of 0 and a <var>value</var> of the computed style of <var>property</var> just before the transition occurs. 
              </li>
              <li>
                The <var>to frame</var>, a <code>WebAnimationFrame</code> with an <var>offset</var> of 1 and a <var>value</var> of the current computed style of <var>property</var>.
              </li>
              <li>
                The <var>frame list</var>, a <code>WebAnimationFrameList</code> containing the <var>from frame</var>  and <var>to frame</var>.
              </li>
              <li>
                The <var>animation function</var>, a <code>WebKeyframesAnimationFunction</code> with a <var>property</var> equal to the property being transitioned, <var>frames</var> set to the <var>frame list</var>, an <var>operation</var> of "replace", an <var>accumulateOperation</var> of "replace", and a <var>pace</var> of undefined.
              </li>
            </ul>
          </li>
          <li>
            The <var>group animation function</var>, a <code>WebGroupedAnimationFunction</code> that contains
            all of the <var>animation function</var> objects generated in the previous step.
          <li>
            The <var>animation timing</var>, a <code>WebTiming</code> with a <var>iterationDuration</var> equal to the <var>transition-duration</var>, a <var>timingFunction</var> equivalent to <var>transition-timing-function</var> (see section ??), and all other properties left at their default values.
          </li> 
          <li>
            The <var>animation</var>, a <code>WebAnimation</code> associating <var>group animation function</var> with <var>animation timing</var>.
          </li>
          <li>
            The <var>animation instance</var>, a <code>WebAnimationInstance</code> that is equivalent to one constructed by calling <var>animation.animateLive(element)</var>
          </li>
        </ul>
      </p>
    </section>
    <section>
      <h2><code>@keyframes</code> rules</h2>
      <p>
        An <code>@keyframe</code> rule can be converted to a <code>WebGroupedAnimationFunction</code> using the following steps:
      </p>
      <ol>
        <li>
          For each <var>property</var> referenced in the @keyframes rule:
          <ol>
            <li>
              For each keyframe that <var>property</var> is referenced in:
              <ol>
                <li>
                  Construct a <code>WebAnimationFrame</code> with <var>offset</var> equal to
                  the selector value of the keyframe, <var>value</var> equal to the value of
                  <var>property</var> within the keyframe, and <var>timingFunction</var> equivalent
                  to the timing function desribed by the keyframe (if any).
                </li>
              </ol>
            </li>
            <li>
              If there is no keyframe at 0, or if there is a keyframe at 0 but it does not reference <var>property</var>, construct a <code>WebAnimationFrame</code> with an <var>offset</var> of 0, a <var>value</var> equal to the current computed value of <var>property</var>, and a null <var>timingFunction</var>.
            </li>
            <li>
              If there is no keyframe at 1, or if there is a keyframe at 1 but it does not reference <var>property</var>, construct a <code>WebAnimationFrame</code> with an <var>offset</var> of 1, a <var>value</var> equal to the current computed value of <var>property</var>, and a null <var>timingFunction</var>.
            </li>
            <li>
                Construct a <code>WebAnimationFrameList</code> and add each of the constructed <code>WebAnimationFrame</code> objects to it.
            </li>
            <li>
              Construct a <code>WebKeyframeAnimationFunction</code> with <var>property</var> equal to the <var>property</var> from the @keyframes rule, <var>frames</var> equal to the constructed <code>WebAnimationFrameList</code>, and all other values at their defaults.
            </li>
          </ol>
        </li>
        <li>
          Construct a <code>WebGroupedAnimationFunction</code> and add each of the constructed <code>WebKeyframeAniamtionFunction</code> objects to it. This is the resulting <code>WebGroupedAnimationFunction</code> object.
      </ol>
    </section>
    <section>
      <h2>CSS Animations</h2>
      <p>
        Section 2 of the [[!CSS3-ANIMATIONS]] specification defines the conditions under which a CSS Animation should occur. When these conditions are met, an implementation will behave as if the following objects were constructed via the Web Animation JS API:
        <ul>
 
          <li>
            An <var>animation function</var>, constructed from the <code>@keyframes</code> declaration referenced by <var>animation-name</var> as described in <a class="sectionRef" href="#keyframes-rules"></a>.
          </li>
          <li>
            An <var>animation timing</var>, a <code>WebTiming</code> with a <var>iterationDuration</var> equal to the <var>animation-duration</var>, a <var>timingFunction</var> equivalent to <var>animation-timing-function</var> (see <a class="sectionRef" href="#generating-equivalent-timing-functions"></a>), and all other properties left at their default values.
            <p class="todo">
              Put this object in a par group.
            </p>
          </li>           
          <li>
            An <var>animation</var>, a <code>WebAnimation</code> associating <var>animation function</var> with <var>animation timing</var>.
          </li>
          <li>
            An <var>animation instance</var>, a <code>WebAnimationInstance</code> that is equivalent to one constructed by calling <var>animation.animateLive(element)</var>
          </li>
        </ul>
      </p>
    </section>
    <section>
      <h2>Generating Equivalent Timing Functions</h2>
      <p class="todo">
        Can't do this until we've defined the interface for timing functions in the main spec.
      </p>
    </section>
  </body>
</html>
